<template>
	<view class="goods-type">
		<zhSlidingMenu ref='zhSlidingMenu' :tabbar='goodsTypeList' :scrollH="scrollH">
			<template #default="{scroll_list}">
				<view class="goods">
					<view class="goods_item" v-for="(item, index) in scroll_list" :key="index" @click="clickGoods(item)">
						<image class="goods_item_img" :src="item.icon" mode=""></image>
						<view class="goods_item_name">{{item.name}}</view>
					</view>
				</view>
			</template>
		</zhSlidingMenu>
	</view>
</template>

<script>
	import {
		getTypeList,
	} from '@/api/api.js';
	import zhSlidingMenu from '@/components/zh-slidingMenu/zhSlidingMenu/zhSlidingMenu.vue'
	export default {
		components: {
			zhSlidingMenu
		},
		data() {
			return {
				scrollH: 0, //scroll高度
				goodsTypeList: [],
				list: [{
						name: "女装",
						id: '121515',
						children: [{
								id: '5885',
								pid: '121515',
								name: "A字裙",
								icon: "https://cdn.uviewui.com/uview/common/classify/1/1.jpg",
							},
							{
								id: '5882135',
								pid: '121515',
								name: "礼服/婚纱",
								icon: "https://cdn.uviewui.com/uview/common/classify/1/14.jpg",
							}
						]
					},
					{
						name: "美食",
						children: [{
								name: "火锅",
								icon: "https://cdn.uviewui.com/uview/common/classify/2/1.jpg",
							},
							{
								name: "精品茗茶",
								icon: "https://cdn.uviewui.com/uview/common/classify/2/7.jpg",
							},
							{
								name: "休闲食品",
								icon: "https://cdn.uviewui.com/uview/common/classify/2/8.jpg",
							},
							{
								name: "休闲食品",
								icon: "https://cdn.uviewui.com/uview/common/classify/2/8.jpg",
							},
						]
					},
					{
						name: "美妆",
						children: [{
								name: "化妆刷",
								icon: "https://cdn.uviewui.com/uview/common/classify/3/1.jpg",
							},
							{
								name: "防晒品",
								icon: "https://cdn.uviewui.com/uview/common/classify/3/14.jpg",
							},
							{
								name: "美甲",
								icon: "https://cdn.uviewui.com/uview/common/classify/3/15.jpg",
							}

						]
					}
				],
			}
		},
		onLoad(op) {
			this.getHomeTypeList(op.id)
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight
				}
			});
		},
		methods: {

			//获取首页一级分类列表
			getHomeTypeList(id) {
				const params = {
					type: 1,
				}
				getTypeList({
					params
				}).then(res => {
					if (res.code == 200) {
						this.goodsTypeList = res.data
						// 通过id 返回下标
						this.$refs.zhSlidingMenu.swichMenuTo(this.goodsTypeList.findIndex(item => item.id == id));
						this.goodsTypeList.map(item => {
							item.name = item.sortName
							item.children = item.mySortList
							item.children.map(itemss => {
								itemss.icon = itemss.sortIoc
								itemss.name = itemss.sortName
							})
						})
						console.log('分类列表', this.goodsTypeList)
					}
				})
			},

			clickGoods(item) { //点击商品
				console.log(item);
				uni.navigateTo({
					url: `/package/pages/goodsView/goodsView?dadId=${item.dadId}`
				})
			},
		}
	}
</script>

<style lang="scss">
	.goods {
		display: flex;
		flex-wrap: wrap;

		.goods_item {
			width: 33.3%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-top: 20rpx;

			.goods_item_img {
				width: 120rpx;
				height: 120rpx;
			}

			.goods_item_name {
				color: #333;
				font-size: 28rpx;
				font-weight: 500rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				word-break: break-all;
				text-align: center;
			}
		}

	}
</style>